<template>
  <div>
    <!-- 为 ECharts 提供一个容器 -->
    <div ref="chartContainer" style="width: 100%;height:50vh;"></div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
import * as echarts from 'echarts/core';
// 引入图表类型，例如柱状图
import { GraphChart } from 'echarts/charts';
// 引入组件，例如提示框、标题、图例
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers';

// 注册必要的组件
echarts.use([GraphChart, TitleComponent, TooltipComponent, LegendComponent, CanvasRenderer]);


export default {
  name: 'EChartsComponent',
  data() {
    return {
      // 存储 ECharts 实例
      myChart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的容器初始化图表
      const chartDom = this.$refs.chartContainer;
      // 假设 chartDom 是您初始化 ECharts 的 DOM 元素
      var myChart = echarts.init(chartDom);

      // 从后端获取的数据
      var data = {'categories': [{'name': 'Root'}, {'name': 'FirstDegree'}, {'name': 'SecondDegree'}], 'nodes': [{'id': 'M25811357', 'name': 'M25811357', 'category': 'Root', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'D1317475', 'name': 'D1317475', 'category': 'Root', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'D1317346', 'name': 'D1317346', 'category': 'FirstDegree', 'vector': [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'D1275554', 'name': 'D1275554', 'category': 'SecondDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'M20395646', 'name': 'M20395646', 'category': 'FirstDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'M1294963', 'name': 'M1294963', 'category': 'FirstDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'M1294007', 'name': 'M1294007', 'category': 'FirstDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'M1297743', 'name': 'M1297743', 'category': 'FirstDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {'id': 'D1054398', 'name': 'D1054398', 'category': 'SecondDegree', 'vector': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0]}], 'links': [['D1317346', 'M25811357'], ['D1275554', 'M20395646'], ['M20395646', 'D1317475'], ['M1294963', 'D1054398'], ['M1294963', 'D1317475'], ['D1317475', 'M1294007'], ['D1317475', 'M1297743'], ['M1294007', 'D1054398'], ['M1297743', 'D1054398'], ['M25811357', 'D1317475'], ['M25811357', 'D1317346'], ['D1317475', 'M20395646'], ['D1317475', 'M1294963']]};

      // ECharts 配置项
      var option = {
        legend: [
          {
            left: 'center',
            data: data.categories.map(function (category) {
              return category.name;
            }),
          }
        ],
        series: [
          {
            type: 'graph',
            layout: 'force',
            categories: data.categories,
            data: data.nodes.map(node => ({
              ...node,
              value: node.vector.reduce((sum, cur) => sum + cur, 0) // 计算节点的总权重
            })),
            links: data.links.map(link => ({
              source: link[0],
              target: link[1]
            })),
            roam: true, // 开启缩放与拖拽
            draggable: true, // 开启节点拖拽
            label: {
              show: true,
              position: 'right'
            },
            force: {
              edgeLength: 150,
              repulsion: 300,
              gravity: 0.08
            },
            lineStyle: {
              curveness: 0
            },
            // 为不同类别的节点设置颜色
            color: ['#c23531', '#03B318FF', '#0059FFFF']
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style>
/* 可以在这里添加一些样式 */
</style>